/**
 * Created by heshufen on 20/6/21.
 */
import React from 'react';
import {ScrollView, StyleSheet, Text, TouchableOpacity, View, Dimensions, Platform} from 'react-native';
import Screen from '../../base/Screen';
import Horizontal from '../../../components/Horizontal';
import BackNavBar from '../../../components/navbar/BackNavBar';
import ScrollableTabView from 'react-native-scrollable-tab-view';

const moment = require('moment');

const screenWidth = Dimensions.get('window').width;
const marginLeft = 36;
const timeWidth = 34;
const timeCol = 5;
const marginMid = (screenWidth - 2 * marginLeft - timeWidth * timeCol) / (timeCol - 1);

const isIos = Platform.OS === 'ios';

class TabBar extends React.Component {

    render() {
        let {onclickTab, activeTab, cusTabs} = this.props;
        return (
            <View>
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    horizontal={true}
                    style={tabBarStyles.container}>
                    {cusTabs.map((name, index) => {
                        return (
                            <TouchableOpacity key={index} onPress={() => {
                                onclickTab(index);
                            }}>
                                <View style={tabBarStyles.tabItem}>
                                    <View  style={tabBarStyles.tabItemTitleContainer}>
                                        <Text
                                            style={activeTab === index ? tabBarStyles.tabItemTitleS : tabBarStyles.tabItemTitle}>{name}</Text>
                                    </View>
                                    {activeTab === index && <View style={tabBarStyles.tabLine}/>}
                                </View>
                            </TouchableOpacity>
                        );
                    })}
                </ScrollView>
            </View>
        );
    }
}

const tabBarStyles = StyleSheet.create({
    container: {
        paddingLeft: 22,
    },
    tabItem: {
        alignItems: 'center',
        marginRight: 50,
    },
    tabItemTitleContainer: {
        height:30,
        justifyContent:'flex-end',
    },
    tabItemTitleS: {
        fontWeight: 'bold',
        fontSize: 24,
        color: '#1e1e1e',
    },
    tabItemTitle: {
        fontWeight: 'bold',
        fontSize: 18,
        color: '#a9a9a9',
    },
    tabLine: {
        marginTop: 8,
        width: 8,
        height: 4,
        borderRadius: 2,
        backgroundColor: '#ff375c',
    },
});

function group(array, subGroupLength) {
    let index = 0;
    let newArray = [];
    while (index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
    }
    return newArray;
}

class YearView extends React.Component {

    render() {
        const {startYear, selectedYear, onClick} = this.props;
        let century = startYear % 100;
        let yearList = [];
        for (let i = 0; i <= 9; i++) {
            yearList.push(startYear + i);
        }
        let yearGroupList = group(yearList, 4);

        let lineArr = [];
        let lineCount = 18;
        for (let i = 0; i < lineCount; i++) {
            lineArr.push(<View key={i} style={yearStyles.line}/>);
        }
        return (
            <Horizontal style={yearStyles.container}>
                <View style={{alignItems: 'center'}}>
                    <View style={{alignItems: 'center'}}>
                        <Text style={yearStyles.leftTitle}>{century > 0 ? century : '0' + century}</Text>
                        <Text style={yearStyles.leftTitle1}>后</Text>
                    </View>
                    {lineArr.map((line) => {
                        return line;
                    })}
                </View>
                <View style={yearStyles.rightContainer}>
                    {yearGroupList.map((yearList, index) => {
                        return (
                            <Horizontal key={index}>
                                {yearList.map((year, index) => {
                                    return (
                                        <View key={index}
                                              style={[yearStyles.rightTitleContainer, selectedYear == year ? yearStyles.rightTitleContainerColor : yearStyles.rightTitleContainerColor1]}>
                                            <Text key={index}
                                                  style={selectedYear == year ? (isIos ? yearStyles.rightTitleS : yearStyles.rightTitleS1) : (isIos ? yearStyles.rightTitle : yearStyles.rightTitle1)}
                                                  onPress={() => {
                                                      onClick(year);
                                                  }}>{year}</Text>
                                        </View>
                                    );
                                })}
                            </Horizontal>
                        );
                    })}
                    <View style={yearStyles.bottomLine}/>
                </View>
            </Horizontal>
        );
    }
}

const yearStyles = StyleSheet.create({
    container: {
        marginLeft: 22,
        marginBottom: 15,
    },
    leftTitle: {
        fontWeight: 'bold',
        fontSize: 24,
        color: '#cccccc',
    },
    leftTitle1: {
        marginBottom: 13,
        fontWeight: 'bold',
        fontSize: 14,
        color: '#cccccc',
    },
    line: {
        marginTop: 5,
        width: 20,
        height: 3,
        backgroundColor: '#dddddd',
    },
    rightContainer: {
        marginLeft: 49,
    },
    rightTitle: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 16,
        color: '#222222',
    },
    rightTitle1: {
        fontWeight: 'bold',
        fontSize: 16,
        color: '#222222',
    },
    rightTitleS: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 16,
        color: '#ffffff',
    },
    rightTitleS1: {
        fontWeight: 'bold',
        fontSize: 16,
        color: '#ffffff',
    },
    rightTitleContainer: {
        marginRight: 10,
        marginBottom: 27,
        borderRadius: 15,
        paddingTop: 4,
        paddingLeft: 9,
        paddingRight: 9,
        paddingBottom: 4,
    },
    rightTitleContainerColor: {
        backgroundColor: '#ff375c',
    },
    rightTitleContainerColor1: {
        backgroundColor: '#fff',
    },

    bottomLine: {
        marginRight: 30,
        height: 1,
        backgroundColor: '#e7e7e7',
    },
});

class YearsView extends React.Component {

    onClick = (selectedYear) => {
        this.props.onClick(selectedYear);
    };

    render() {
        let {startYearList,selectedYear} = this.props;
        let lineArr = [];
        let lineCount = 3;
        for (let i = 0; i < lineCount; i++) {
            lineArr.push(<View key={i} style={yearStyles.line}/>);
        }
        return (
            <ScrollView>
                <View style={{flex: 1}}>
                    <Horizontal style={yearsStyles.topContainer}>
                        <View>
                            {lineArr.map((line) => {
                                return line;
                            })}
                        </View>
                        <View style={yearsStyles.bottomLine}/>
                    </Horizontal>
                    {startYearList.map((startYear, index) => {
                        return (
                            <YearView key={index} startYear={startYear} selectedYear={selectedYear}
                                      onClick={this.onClick}/>
                        );
                    })}
                </View>
            </ScrollView>
        );
    }
}

const yearsStyles = StyleSheet.create({
    topContainer: {
        marginTop: 24,
        marginLeft: 26,
        marginBottom: 15,
    },
    bottomLine: {
        marginLeft: 52,
        width: 223,
        marginRight: 30,
        height: 1,
        backgroundColor: '#e7e7e7',
    },
});

class TimeView extends React.Component {

    render() {
        const {times, selectedTime, onClick} = this.props;
        let timeGroupList = group(times, 5);

        return (
            <View style={timeStyles.container}>
                {timeGroupList.map((timeList, index) => {
                    return (
                        <Horizontal key={index} style={timeStyles.row}>
                            {timeList.map((time, index) => {
                                return (
                                    <TouchableOpacity key={index} onPress={() => onClick(time)}
                                                      style={[timeStyles.timeContainer, selectedTime == time ? timeStyles.timeContainerColorS : timeStyles.timeContainerColor, {marginRight: (index == timeCol - 1) ? 0 : marginMid}]}>
                                        <Text
                                            style={selectedTime == time ? timeStyles.timeS : timeStyles.time}>{time > 9 ? time : '0' + time}</Text>
                                    </TouchableOpacity>
                                );
                            })}
                        </Horizontal>
                    );
                })}
            </View>
        );
    }
}

const timeStyles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 30,
        marginLeft: marginLeft,
        marginRight: marginLeft,
    },
    row: {
        marginBottom: 28,
    },
    timeContainer: {
        width: 34,
        height: 34,
        borderRadius: 17,
        alignItems: 'center',
        justifyContent: 'center',
    },
    timeContainerColor: {
        backgroundColor: '#fff',
    },
    timeContainerColorS: {
        backgroundColor: '#ff375c',
    },
    time: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 17,
        color: '#222222',
    },
    timeS: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 17,
        color: '#ffffff',
    },
});

export default class ChooseBirthdayScreen extends Screen {

    getInitState(props): * {
        let months = [];
        for (let i = 0; i < 12; i++) {
            months.push(i + 1);
        }
        return {
            selectedYear: 0,
            cusTabs: ['年', '月', '日'],
            startYearList: [1970, 1980, 1990],
            months,
            selectedMonth: 0,
            days: [],
            selectedDay: 0,
        };
    }

    renderHeader(navigation) {
        return (
            <BackNavBar navigation={navigation}/>
        );
    }

    onclickTab = (index) => {
        if (index == 1 && this.state.selectedYear == 0) {
            alert('请先选择年份');
        } else if (index == 2 && this.state.selectedMonth == 0) {
            alert('请先选择月份');
        } else {
            this.goToPage(index);
        }
    };

    onClickYear = (selectedYear) => {
        let cusTabs = this.state.cusTabs;
        cusTabs[0] = selectedYear + '年';
        this.setState({selectedYear, cusTabs}, () => {
            setTimeout(() => {
                this.goToPage(1);
            }, 10);
        });
    };

    onClickMonth = (selectedMonth) => {
        let cusTabs = this.state.cusTabs;
        cusTabs[1] = selectedMonth + '月';
        cusTabs[2] = '日';

        const {selectedYear} = this.state;

        let timeStr = selectedYear + '-' + (selectedMonth > 9 ? selectedMonth : ('0' + selectedMonth)) + '-' + '01';
        let days = this.getMonthDays(timeStr);
        this.setState({selectedMonth, cusTabs, days, selectedDay: 0}, () => {
            setTimeout(() => {
                this.goToPage(2);
            }, 10);
        });
    };

    onClickDay = (selectedDay) => {
        let cusTabs = this.state.cusTabs;
        cusTabs[2] = selectedDay + '日';

        this.setState({selectedDay, cusTabs});
        let user = this.navigationParams;
        let birthday = {
            year: this.state.selectedYear,
            month: this.state.selectedMonth,
            day: selectedDay,
        };
        user.birthday = birthday;

        alert(JSON.stringify(user));
    };

    getMonthDays = (timeStr) => {
        // let a = moment('2019-03-01').daysInMonth();
        let dayCount = moment(timeStr).daysInMonth();
        let days = [];
        for (let i = 0; i < dayCount; i++) {
            days.push(i + 1);
        }
        return days;
    };

    renderBody(navigation) {
        const {cusTabs, startYearList, selectedYear, months, selectedMonth, days, selectedDay} = this.state;
        return (
            <View style={{flex: 1}}>
                <Horizontal style={styles.titleContainer}>
                    <Text style={styles.title}>您的生日</Text>
                    <Text style={styles.title1}>2<Text style={styles.title2}>/8</Text></Text>
                </Horizontal>
                <Text style={styles.desc}>让对方更好了解你，还有生日礼物哦～</Text>
                <ScrollableTabView renderTabBar={({tabs, activeTab, goToPage}) => {
                    this.goToPage = goToPage; //引用
                    return (
                        <TabBar cusTabs={cusTabs} onclickTab={this.onclickTab}/>
                    );
                }}>
                    <YearsView key={'1'} startYearList={startYearList} selectedYear={selectedYear} onClick={this.onClickYear}/>
                    {selectedYear != 0 &&
                    <TimeView key={'2'} times={months} selectedTime={selectedMonth} onClick={this.onClickMonth}/>}
                    {selectedMonth != 0 &&
                    <TimeView key={'3'} times={days} selectedTime={selectedDay} onClick={this.onClickDay}/>}
                </ScrollableTabView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    titleContainer: {
        marginTop: 21,
        marginLeft: 18,
        marginRight: 18,
        marginBottom: 8,
        alignItems: 'center',
    },
    title: {
        flex: 1,
        fontWeight: 'bold',
        fontSize: 28,
        color: '#1e1e1e',
    },
    title1: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 20,
        color: '#1e1e1e',
    },
    title2: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 20,
        color: '#858585',
    },
    desc: {
        marginLeft: 18,
        marginBottom: 42,
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 15,
        color: '#b0b0b0',
    },

});
